<div class="container-fluid brownContainer footer bottom-40">
    <div class="row">
        <div class="col-sm-4">
            <h4 class="brown">Responsive Design</h4>
            <p class="hidden-xs">
                This site uses responsive HTML5 technologies to work on most, if not all platforms.  Try it; view this website on a
                phone!
            </p>
            <p class="visible-xs-block">
                This site uses responsive HTML5 technologies to work on most, if not all platforms. Try it; view this website with a
                laptop or a desktop computer.
            </p>
        </div>
        <div class="col-sm-3 col-sm-offset-1">
            <h4 class="brown">Connect with Me</a></h4>
            <div class="row">
                <div class="col-xs-1">
                    <a href="https://github.com/jbranso" target="_blank">
                        <img src="images/github.png" style="max-width:20px;max-height:20px;" />
                    </a>
                </div>
                <div class="col-xs-1">
                    <a href="https://www.linkedin.com/profile/public-profile-settings?trk=prof-edit-edit-public_profile" target="_blank">
                        <img src="images/linked-in.png" style="max-width:20px;max-height:20px;" />
                    </a>
                </div>
                <div class="col-xs-1">
                    <a href="mailto:gnusites@fastmail.com" target="_blank">
                        <img alt="email-icon" src="images/email-icon.png"/>
                    </a>
                </div>
            </div>
        </div><!-- col-sm-6 -->
        <div class="col-sm-4">
            <h4 class="brown">What runs this site</h4>
            This site is powered by some pretty amazing web technologies including nginx, bootstrap, jQuery,  PHP, HTML5, and
            javascript!
        </div>
    </div>
    <br/><br/><br/>
</div><!-- .container -->

<!-- Bootstrap core JavaScript
     ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
        integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script>
 window.onbeforeunload = function() {
     window.stop();
 }
 function load(html, php) {
     /* collapse the navbar when the user selects home */
     $("#navbar-collapse").collapse("hide");
     var height = $("#content").height();
     $("#content").children().fadeOut(400, function () {
         //make sure that the height of the content area, stays the same when the element is hidden
         $("#content").css("height", height);
     });
     var id = php.split(".")[0];
     removeBrownLinksInNavbarAndAddBrownLinks (id);
     var xmlhttp = new XMLHttpRequest();
     xmlhttp.open("GET", html, true);
     xmlhttp.send();
     xmlhttp.onreadystatechange=function()
     {
	     if (xmlhttp.readyState==4 && xmlhttp.status==200)
	     {
             window.setTimeout(function () {
                 $("#content").fadeOut(0);
	             document.getElementById("content").innerHTML=xmlhttp.responseText;
                 $("#content").css("height", "auto");
                 $("#content").fadeIn();
             }, 400);
	     }
     }
     history.pushState(null, null, php);
 }
 //at the moment, I'm not sure how to configure apache to NOT think index.html is the home page.
 //so index.html cannot be.  Index.txt it is
 function loadHome () {
     load ("index.txt", "index.php");
 }
 function loadAbout () {
     load ("about.html", "about.php");
 }
 function loadSkills () {
     load ("skills.html", "skills.php");
 }
 function loadExperience () {
     load ("experience.html", "experience.php");
 }
 function loadPortfolio () {
     load ("portfolio.html", "portfolio.php");
 }
 function userPressesBackButton(href) {

     $("#navbar-collapse").collapse("hide");
     var height = $("#content").height();
     $("#content").children().fadeOut(400, function () {
         //make sure that the height of the content area, stays the same when the element is hidden
         $("#content").css("height", height);
     });
     var xmlhttp = new XMLHttpRequest();
     var http = location.pathname.toString().split("/").pop().split(".")[0];
     if (http == "index") {
         http = http + ".txt";
     } else {
         http = http + ".html";
     }
     xmlhttp.open("GET", http , true);
     xmlhttp.send();
     xmlhttp.onreadystatechange=function()
     {
	     if (xmlhttp.readyState==4 && xmlhttp.status==200)
	     {
             window.setTimeout(function () {
                 $("#content").fadeOut(0);
	             document.getElementById("content").innerHTML=xmlhttp.responseText;
                 $("#content").css("height", "auto");
                 $("#content").fadeIn();
             }, 400);

	     }
     }
 }
 window.addEventListener("popstate", function(e) {
     userPressesBackButton(location.pathname);
 });

 function removeBrownLinksInNavbarAndAddBrownLinks (id) {
     $(".navbar-brand").css("color","#9d9d9d");
     $(".nav.navbar-nav").children().children().css("color", "#9d9d9d");
     $("#" + id).css("color", "#E18A07");
 }

</script>
  </body>
</html>
